<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view class="router" v-wechat-title="$route.meta.title" />
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            transitionName: "slide-right" // 默认动态路由变化为slide-right
        };
    },
    watch: {
        $route(to, from) {
            let isBack = eval(sessionStorage.isBack);
            if (isBack) {
                this.transitionName = "slide-right";
            } else {
                this.transitionName = "  slide-left";
            }
            sessionStorage.isBack = false;
        }
    }
};
</script>

<style scoped lang="less">
#app {
    .router {
        transition: all 0.3s ease;
        position: absolute;
    }

    .slide-left-enter,
    .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100% 0);
    }
}
</style>
